<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>添加点标记</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=xVGoz1SVnP05cpxvyHbukcyIFrUNwA9p"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
    let map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.304, 39.928), 15);
    map.enableScrollWheelZoom(true);
    // 创建点标记 30个
    let marker1 = new BMapGL.Marker(new BMapGL.Point(116.196, 39.915));//石景山八角街道
    let marker2 = new BMapGL.Marker(new BMapGL.Point(116.236, 39.901));//石景山八宝山街道
    let marker3 = new BMapGL.Marker(new BMapGL.Point(116.197, 39.910));//石景山苹果园
    let marker4 = new BMapGL.Marker(new BMapGL.Point(116.145, 39.928));//石景山杨庄街道
    let marker5 = new BMapGL.Marker(new BMapGL.Point(116.145, 39.928));//石景山古城街道

    let marker6 = new BMapGL.Marker(new BMapGL.Point(116.168, 39.925));//石景山金顶街街道
    let marker7 = new BMapGL.Marker(new BMapGL.Point(116.145, 39.928));//石景山广宁街道
    let marker8 = new BMapGL.Marker(new BMapGL.Point(116.126, 39.956));//石景山五里坨街道
    let marker9 = new BMapGL.Marker(new BMapGL.Point(116.224, 39.907));//石景山鲁谷街道
    let marker10 = new BMapGL.Marker(new BMapGL.Point(116.269, 39.912));//海淀区万寿路街道

    let marker11 = new BMapGL.Marker(new BMapGL.Point(116.309, 39.902));//海淀区羊坊店街道
    let marker12 = new BMapGL.Marker(new BMapGL.Point(116.321, 39.920));//海淀区甘家口街道
    let marker13 = new BMapGL.Marker(new BMapGL.Point(116.327, 39.926));//海淀区八里庄街道
    let marker14 = new BMapGL.Marker(new BMapGL.Point(116.312, 39.944));//海淀区紫竹院街道
    let marker15 = new BMapGL.Marker(new BMapGL.Point(116.320, 39.952));//海淀区北下关街道

    let marker16 = new BMapGL.Marker(new BMapGL.Point(116.359, 39.978));//海淀区北太平庄街道
    let marker17 = new BMapGL.Marker(new BMapGL.Point(116.319, 39.984));//海淀区海淀街道
    let marker18 = new BMapGL.Marker(new BMapGL.Point(116.328, 39.973));//海淀区中关村
    let marker19 = new BMapGL.Marker(new BMapGL.Point(116.360, 40.001));//海淀区学院路街道
    let marker20 = new BMapGL.Marker(new BMapGL.Point(116.338, 40.032));//海淀区清河街道

    let marker21 = new BMapGL.Marker(new BMapGL.Point(116.305, 39.965));//海淀区青龙桥
    let marker22 = new BMapGL.Marker(new BMapGL.Point(116.212, 39.999));//海淀区香山街道
    let marker23 = new BMapGL.Marker(new BMapGL.Point(116.357, 40.035));//海淀区西三旗街道
    let marker24 = new BMapGL.Marker(new BMapGL.Point(116.269, 40.054));//海淀区马连洼街道
    let marker25 = new BMapGL.Marker(new BMapGL.Point(116.366, 39.987));//海淀区花园路街道

    let marker26 = new BMapGL.Marker(new BMapGL.Point(116.305, 39.965));//海淀区田村街道
    let marker27 = new BMapGL.Marker(new BMapGL.Point(116.305, 40.030));//海淀区上地街道
    let marker28 = new BMapGL.Marker(new BMapGL.Point(116.285, 39.972));//海淀区曙光街道
    let marker29 = new BMapGL.Marker(new BMapGL.Point(116.308, 40.000));//海淀区燕园街道
    let marker30 = new BMapGL.Marker(new BMapGL.Point(116.332, 40.000));//海淀区清华园街道
    let marker31 = new BMapGL.Marker(new BMapGL.Point(116.266, 39.914));//海淀区永定路街道

    let marker32 = new BMapGL.Marker(new BMapGL.Point(116.301, 39.980));//海淀区万柳地区
    let marker33 = new BMapGL.Marker(new BMapGL.Point(116.383, 40.039));//海淀区东升地区
    let marker34 = new BMapGL.Marker(new BMapGL.Point(116.189, 40.028));//海淀区温泉地区
    let marker35 = new BMapGL.Marker(new BMapGL.Point(116.213, 39.977));//海淀区四季青地区
    let marker36 = new BMapGL.Marker(new BMapGL.Point(116.283, 40.039));//海淀区西北旺地区
    let marker37 = new BMapGL.Marker(new BMapGL.Point(116.164, 40.080));//海淀区苏家坨地区
    let marker38 = new BMapGL.Marker(new BMapGL.Point(116.305, 39.965));//海淀区上庄地区


    // 在地图上添加点标记
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    map.addOverlay(marker4);
    map.addOverlay(marker5);

    map.addOverlay(marker6);
    map.addOverlay(marker7);
    map.addOverlay(marker8);
    map.addOverlay(marker9);
    map.addOverlay(marker10);

    map.addOverlay(marker11);
    map.addOverlay(marker12);
    map.addOverlay(marker13);
    map.addOverlay(marker14);
    map.addOverlay(marker15);

    map.addOverlay(marker16);
    map.addOverlay(marker17);
    map.addOverlay(marker18);
    map.addOverlay(marker19);
    map.addOverlay(marker20);

    map.addOverlay(marker21);
    map.addOverlay(marker22);
    map.addOverlay(marker23);
    map.addOverlay(marker24);
    map.addOverlay(marker25);

    map.addOverlay(marker26);
    map.addOverlay(marker27);
    map.addOverlay(marker28);
    map.addOverlay(marker29);
    map.addOverlay(marker30);
    map.addOverlay(marker31);

    map.addOverlay(marker32);
    map.addOverlay(marker33);
    map.addOverlay(marker34);
    map.addOverlay(marker35);
    map.addOverlay(marker36);
    map.addOverlay(marker37);
    map.addOverlay(marker38);
</script>